<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <el-tag  effect="dark"><i class="el-icon-s-custom"></i>{{userName}}</el-tag>
          <el-tag  effect="dark"><i class="el-icon-s-platform"></i>在线考试系统</el-tag>
        </el-col>
        <el-col :span="8">
          &nbsp;
        </el-col>
        <el-col :span="8" align="right">


          <el-button type="primary"  size="mini" round @click="backLogin">退出系统</el-button>
          <el-button type="primary" size="mini" round @click="backIndex" >系统首页</el-button>
        </el-col>
      </el-row>

    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- router 开启路由地址配置-->
        <el-menu
          :default-openeds="['1']"
          text-color="white"
          background-color="#333333"
          router>
          <!-- 一级菜单-->
          <!-- index 菜单索引-->
          <template v-for="x in node ">
            <el-submenu :index="x.index">
              <template slot="title">
                <i :class="x.icon"></i>
                <span>{{x.name}}</span>
              </template>
              <!-- 二级菜单-->
              <template v-if="x.children!=null">

                <template v-for="y in x.children">
                  <!-- index 路由地址-->
                  <el-menu-item :index="y.url">
                    <template>
                      <i :class="y.icon"></i>
                      {{y.name}}
                    </template>
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由视图-->
        <router-view ></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>

  export default {
    name: "index",
    data() {
      return {
        userName:"",//登录用户名
        node: [],
        info:"",
        ws:""
      }
    },
    methods:{
      queryPower(){//查询登录用户的权限
         var self = this;
         this.$http.post("/power/queryPowerByName",this.$qs.stringify({"userName":this.userName})).then(function (rs) {
              if(rs.data.code==200){
                 self.node = rs.data.data;
              }else{
                self.$message("没有权限");
              }
         })

      },
      backIndex(){//返回首页
        this.$router.push("/main");

      },
      backLogin(){//退出系统
        //清除个人信息：本地存储
        //回到登录页面
        this.$router.push("/");
        //刷新
        this.$router.go(0);
        //设置不要自动登录
        localStorage.setItem("isLogin","0");
      },
       messageNotic(){ //消息通知服务
         //创建websockcet服务
        this.ws = new WebSocket("ws:localhost:8080/message");
        var self = this;
         //服务开启事件
         this.ws.onopen=function () {
            console.log("创建websocket连接");
            //向服务端发送一个消息
           self.ws.send(self.userName+"已经上线");
         }
         //服务关闭事件
         this.ws.onclose=function () {
           //alert(1);
           console.log("websocket连接关闭");
         }
          //接收服务端发送来的消息事件
         this.ws.onmessage=function (rs) {
           console.log("服务端发送来的消息是"+rs.data);
            //消息通知组件
           self.$notify({
             title: '消息提示',
             message: rs.data,
             position: 'bottom-right',
             duration:0//不自动关闭
           });
         }
         //异常事件
         this.ws.onerror=function () {
           console.log("websocket连接出现异常");
         }
       },
       kickServer(){//踢人服务
           var www = new WebSocket("ws://localhost:8080/kickServer/"+this.userName);
           var self = this;
           //接收服务端发送的消息
           www.onmessage=function (rs) {
              if(rs.data=="已登录"){
                //提示
                self.$alert("你的账号已经在别的地方登录！你被迫下线","下线提示",{
                  confirmButtonText: '确定',
                  callback:function () {
                    //回到登录页面
                    self.backLogin();
                  }
                });

              }
           }
       }

    },
    created(){
      //获取存在本地存储的cookie的用户名
      this.userName = JSON.parse(localStorage.getItem("user")).userName;
      this.queryPower();

      var s = localStorage.getItem("status");

      if(s=="0"){
        //运行消息通知
        this.messageNotic();
        //运行踢人服务
        this.kickServer();

        localStorage.setItem("status","1");
      }

      //console.log(typeof (s));
      //把js对象文本转换成js对象
     // console.log(typeof (JSON.parse(s)));


    }

  }
</script>

<style >
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }


  .el-header {
    background-color: #444444;
    color: white;
    padding-top: 15px;

  }

  .el-aside {
    background-color: #333333;
    color: white;
    height: 100%;
  }

  .el-main {
    background-color: white;
    color: #333;
  }
</style>
